import React, { Component } from 'react'
import { View, Form } from '@tarojs/components'
import { AtInput } from 'taro-ui'
import { SpNavBar, SpPage } from '@/components'
import Taro from '@tarojs/taro'
import api from '@/api'

import './agent-info.scss'

class Index extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isEdit: false,
      info: {}
    }
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {}

  // onLoad
  onLoad() {
    this.fetch()
  }

  // onReady
  onReady() {}

  // 对应 onShow
  componentDidShow() {}

  // 对应 onHide
  componentDidHide() {}

  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh() {}
  async fetch() {
    const resUser = Taro.getStorageSync('userinfo')
    const { agentId } = resUser

    const data = await api.agent.detail({
      agent_id: agentId
    })
    this.setState({ info: data })
  }

  handleSubmit() {}
  handleEdit() {}
  handleInputChange() {}
  render() {
    const { isEdit, info } = this.state
    return (
      <SpPage className='page-ecshopx-certification'>
        <SpNavBar title='认证信息' leftIconType='chevron-left' />
        <View className='page'>
          <Form onSubmit={this.handleSubmit}>
            <View className='page-certification-form'>
              <AtInput
                title='姓名'
                type='text'
                // clear={isEdit}
                name='agents_name'
                editable={isEdit}
                value={info.agents_name}
                onChange={this.handleInputChange('agents_name')}
              />
              <AtInput
                title='电话'
                type='text'
                // clear={isEdit}
                name='phone'
                editable={isEdit}
                value={info.phone}
                onChange={this.handleInputChange('phone')}
              />
              <AtInput
                title='所在省市区'
                type='text'
                // clear={isEdit}
                name='card_id'
                editable={isEdit}
                value={`${info.province}${info.city}${info.area}`}
                onChange={this.handleInputChange('card_id')}
              />
              <AtInput
                title='详细地址'
                type='text'
                name='address'
                // clear={isEdit}
                editable={isEdit}
                value={info.address}
                onChange={this.handleInputChange('cert_id')}
              />
              <AtInput
                title='银行卡所属银行'
                type='text'
                name='bank_name'
                editable={isEdit}
                value={info.bank_name}
                onChange={this.handleInputChange('bank_name')}
              />
              <AtInput
                title='银行卡号'
                type='text'
                name='card_number'
                // clear={isEdit}
                editable={isEdit}
                value={info.card_number}
                onChange={this.handleInputChange('card_number')}
              />
            </View>
          </Form>
        </View>
      </SpPage>
    )
  }
}

export default Index
